<template>
  <div class="bar-echart">
    <base-echart class="echart" :options="Option"></base-echart>
  </div>
</template>

<script setup>
import { computed } from "vue";
import baseEchart from "../config/base-echart.vue";

const props = defineProps({
  option: Object,
});

const Option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["降水天数", "降水量"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.option.legend,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "降水天数",
        position: "left",
        alignTicks: true,
        axisLabel: {
          formatter: "{value}天",
        },
      },
      {
        type: "value",
        name: "降水量",
        position: "right",
        alignTicks: true,
        axisLabel: {
          formatter: "{value}mm",
        },
      },
    ],
    series: [
      {
        name: "降水天数",
        type: "bar",
        data: props.option.days,
      },
      {
        name: "降水量",
        type: "line",
        smooth: true,
        showSymbol: false,
        yAxisIndex: 1,
        data: props.option.pcpn,
      },
    ],
  };
});
</script>

<style lang="less" scoped>
.bar-echart {
  padding: 0 16px;
}
</style>